<template>
    <div class="front" v-loading="loading[0]" element-loading-text="拼命加载中..." element-loading-spinner="el-icon-loading" element-loading-background="#fff">
		<el-input v-model="searchDepartText" placeholder="输入关键字" style="margin: 10px 0!important"></el-input>
		<div class="tree">
			<el-tree :data="allTreeData" :accordion="false" :props="defaultProps" :filter-node-method="filterNode" ref="tree" @node-click="getCurrentTreeData" :default-expand-all="true" highlight-current :expand-on-click-node="false"></el-tree>
		</div>
	</div>
    
</template>
<script>
/**
 * 新增客户权限弹窗，显示所有客户
 * zqf
 */
    export default {
        data() {
            return {
                searchDepartText: '',
                allTreeData: this.$store.state.userManagementStore.allTreeData,
                defaultProps: {
                    label: 'name',
                    children: 'clients'
                },
                dbClickRow: {       //双击选中的部门数据
                    name: '',
                    parentId: ''
                },
                loading: this.$store.state.userManagementStore.loading
            }
        },
        watch: {
            searchDepartText(val){
                this.$refs.tree.filter(val);
            }
        },
        methods: {
            filterNode(value, data) {               //部门选择里面的搜索框
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            getCurrentTreeData(row) {              //获取上级部门弹窗数据
                this.$store.commit('userManagementStore/updateCustomerPer', row);
                this.close();
            },
            close() {           //关闭新增弹窗
                let index = parent.layer.getFrameIndex(window.name);    //先得到当前iframe层的索引
                parent.layer.close(index);
            },
        },
        mounted() {
            this.$store.dispatch('userManagementStore/getCustomerData', this.$url + 'userManage/findAccountItem');
            setTimeout(() => {
                this.allTreeData = this.$store.state.userManagementStore.allTreeData
            });
        }
    }
</script>
<style scoped>
	.tree {height: calc(100% - 60px);box-sizing: border-box;}
	.tree .el-tree {height: 100% !important;overflow-y: auto !important;}
</style>